<script setup lang="tsx">
import { reactive, ref } from 'vue';
import { UUID } from 'uuidjs';
import { get } from '@/service/api/api';
import Search from './modules/search.vue';

const searchParams = ref({
  time: null,
  moduleNo: null,
  subEqpName: null,
  product: null
});
const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number, range: number[]) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const tableData = ref([]);
const loading = ref(false);
const columnChecks = ref<any[]>([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'product',
    dataIndex: 'product',
    title: '生产型号',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '批次号',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },

  {
    key: 'subEqpName',
    dataIndex: 'subEqpName',
    title: '线别',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'width',
    dataIndex: 'width',
    title: '宽度',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'height',
    dataIndex: 'height',
    title: '高度',
    align: 'center',
    checked: true,
    width: 120,
    ellipsis: true
  },
  {
    key: 'platethiCkness',
    dataIndex: 'platethiCkness',
    width: 120,
    title: '板厚',
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'cycleTime',
    dataIndex: 'cycleTime',
    width: 180,
    title: '循环时间',
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'copperThickAfPlatFront',
    dataIndex: 'copperThickAfPlatFront',
    title: '镀铜厚度(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'copperThickAfPlatBack',
    dataIndex: 'copperThickAfPlatBack',
    title: '镀铜厚度(后面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'dateTime',
    dataIndex: 'dateTime',
    width: 180,
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront1',
    dataIndex: 'chAsdFront1',
    title: '1ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront2',
    dataIndex: 'chAsdFront2',
    title: '2ch ASD(正面)',
    align: 'center',
    checked: true,
    width: 120,
    ellipsis: true
  },

  {
    key: 'chAsdFront3',
    dataIndex: 'chAsdFront3',
    title: '3ch ASD(正面)',
    align: 'center',
    checked: true,
    width: 120,
    ellipsis: true
  },
  {
    key: 'chAsdFront4',
    dataIndex: 'chAsdFront4',
    title: '4ch ASD(正面)',
    align: 'center',
    checked: true,
    width: 120,
    ellipsis: true
  },
  {
    key: 'chAsdFront5',
    dataIndex: 'chAsdFront5',
    title: '5ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront6',
    dataIndex: 'chAsdFront6',
    title: '6ch ASD(正面)',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront7',
    dataIndex: 'chAsdFront7',
    width: 120,
    title: '7ch ASD(正面)',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront8',
    dataIndex: 'chAsdFront8',
    title: '8ch ASD(正面)',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront9',
    dataIndex: 'chAsdFront9',
    title: '9ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront10',
    dataIndex: 'chAsdFront10',
    title: '10ch ASD(正面)',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront11',
    dataIndex: 'chAsdFront11',
    title: '11ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront12',
    dataIndex: 'chAsdFront12',
    width: 120,
    title: '12ch ASD(正面)',
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'chAsdFront13',
    dataIndex: 'chAsdFront13',
    title: '13ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront14',
    dataIndex: 'chAsdFront14',
    title: '14ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront15',
    dataIndex: 'chAsdFront15',
    title: '15ch ASD(正面)',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront16',
    dataIndex: 'chAsdFront16',
    title: '16ch ASD(正面)',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront17',
    dataIndex: 'chAsdFront17',
    title: '17ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront18',
    dataIndex: 'chAsdFront18',
    title: '18ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront19',
    dataIndex: 'chAsdFront19',
    title: '19ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdFront20',
    dataIndex: 'chAsdFront20',
    title: '20ch ASD(正面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack1',
    dataIndex: 'chAsdBack1',
    title: '1ch ASD(后面)',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack2',
    dataIndex: 'chAsdBack2',
    title: '2ch ASD(后面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },

  {
    key: 'chAsdBack3',
    dataIndex: 'chAsdBack3',
    width: 120,
    title: '3ch ASD(后面)',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack4',
    dataIndex: 'chAsdBack4',
    width: 120,
    title: '4ch ASD(后面)',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack5',
    dataIndex: 'chAsdBack5',
    title: '5ch ASD(后面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack6',
    dataIndex: 'chAsdBack6',
    title: '6ch ASD(后面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack7',
    dataIndex: 'chAsdBack7',
    title: '7ch ASD(后面)',
    align: 'center',
    checked: true,
    width: 120,
    ellipsis: true
  },
  {
    key: 'chAsdBack8',
    dataIndex: 'chAsdBack8',
    title: '8ch ASD(后面)',
    align: 'center',
    checked: true,
    width: 120,
    ellipsis: true
  },
  {
    key: 'chAsdBack9',
    dataIndex: 'chAsdBack9',
    title: '9ch ASD(后面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack10',
    dataIndex: 'chAsdBack10',
    title: '10ch ASD(后面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack11',
    dataIndex: 'chAsdBack11',
    width: 120,
    title: '11ch ASD(后面)',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack12',
    dataIndex: 'chAsdBack12',
    title: '12ch ASD(后面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack13',
    dataIndex: 'chAsdBack13',
    title: '13ch ASD(后面)',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack14',
    dataIndex: 'chAsdBack14',
    title: '14ch ASD(后面)',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack15',
    dataIndex: 'chAsdBack15',
    width: 120,
    title: '15ch ASD(后面)',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack16',
    dataIndex: 'chAsdBack16',
    width: 120,
    title: '16ch ASD(后面)',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack17',
    dataIndex: 'chAsdBack17',
    width: 120,
    title: '17ch ASD(后面)',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack18',
    dataIndex: 'chAsdBack18',
    title: '18ch ASD(后面)',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack19',
    dataIndex: 'chAsdBack19',
    title: '19ch ASD(后面)',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBack20',
    dataIndex: 'chAsdBack20',
    width: 120,
    title: '20ch ASD(后面)',
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
function reset() {
  search();
}

function search() {
  pagination.current = 1;
  getData();
}

function getData() {
  const params: any = {
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    moduleNo: searchParams.value.moduleNo,
    subEqpName: searchParams.value.subEqpName,
    product: searchParams.value.product
  };
  if (searchParams.value.time?.[0]) {
    params.beginTime = searchParams.value.time[0];
    params.endTime = searchParams.value.time[1];
  }
  loading.value = true;
  get('/mes/trace2Gather/pageList', params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item: any, index: number) => {
          item.index = index + 1;
          item.uid = UUID.genV4().hexNoDelim;
        });
        pagination.total = data.total;
        tableData.value = data.list;
      }
    })
    .finally(() => (loading.value = false));
}

getData();

const currentRowId = ref(null);
const customRow = record => {
  return {
    style: {
      // 设置字体颜色
      // 'color': record.id === this.leftAlignId ? '#fff' : '',
      //  设置行背景色
      // 'background-color': record.uid === currentRowId.value ? 'rgba(86, 205, 243, 0.3)' : ''
      // 设置字体类型
      // 'font-family': 'Microsoft YaHei',
      // // 下划线
      // 'text-decoration': 'underline',
      // // 字体样式-斜体
      // 'font-style': 'italic',
      // // 字体加粗
      // 'font-weight': 'bold'
      background: record.uid === currentRowId.value ? '#BAEAFA' : ''
    },
    class: record.uid === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.uid;
    }
  };
};
</script>

<template>
  <div class="jl-main-page one-code-ascend min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search v-model:model="searchParams" @reset="reset" @search="search" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #extra>
        <TableColumnSetting v-model:columns="columnChecks" />
      </template>
      <STable
        :columns="columnChecks"
        :data-source="tableData"
        bordered
        size="small"
        :loading="loading"
        row-key="uid"
        :pagination="pagination"
        :custom-row="customRow"
        :scroll="{ x: 1680, y: 'auto' }"
        class="h-full"
        :row-height="23"
      />
    </ACard>
  </div>
</template>

<style></style>
